<template>
  <el-dialog
    width="1000px"
    :title="dataForm.id ? '编辑' : '添加'"
    :visible.sync="visible"
    :show-close="true"
  >
    <el-form
      ref="dataForm"
      v-loading="commonLoading"
      :model="dataForm"
      :rules="dataRule"
      size="small"
      label-position="right"
      label-width="100px"
      :element-loading-text="loadingText"
    >
      <!-- <el-form-item label="分类名称" prop="categoryId">
        <el-select
          v-model="dataForm.categoryId"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="标题" prop="title">
        <el-input v-model="dataForm.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="日期" prop="field1">
        <el-input
          v-model="dataForm.field1"
          placeholder="请输入日期 如  6月20"
        />
      </el-form-item>

      <el-form-item label="时间" prop="field2">
        <el-input
          v-model="dataForm.field2"
          placeholder="请输入时间 如  09:00-18:00"
        />
      </el-form-item>

      <!-- <el-form-item label="开始时间">
        <el-date-picker
          v-model="dataForm.startTime"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择开始时间"
        />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="dataForm.endTime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="请选择结束时间"
        />
      </el-form-item> -->
      <!-- <el-form-item label="自定义时间">
        <el-date-picker
          v-model="dataForm.customTime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="请选择自定义时间"
        />
      </el-form-item> -->
      <!--

      <el-form-item label="视频地址" prop="videoUrl">
        <el-input v-model="dataForm.videoUrl" placeholder="请输入视频地址" />
      </el-form-item>
      <el-form-item label="外链" prop="url">
        <el-input v-model="dataForm.url" placeholder="请输入外链" />
      </el-form-item>
      <el-form-item label="学校logo" prop="thumb">
        <el-col :span="11">
          <el-input
            v-model="dataForm.thumb"
            placeholder="请输入或上传交流会图标"
          />
        </el-col>
        <el-col :span="11">
          <ul class="uploaderList">
            <li v-if="dataForm.thumb">
              <img :src="dataForm.thumb" alt width="100%">
              <div class="BtnBox">
                <i
                  class="el-icon-view"
                  style="margin-right: 15px"
                  @click="viewPic"
                />
                <i class="el-icon-delete" @click="dataForm.thumb = ''" />
              </div>
            </li>
            <li v-if="!dataForm.thumb">
              <el-upload
                ref="uploadLogo"
                action="string"
                :http-request="uploadLogo"
                :show-file-list="false"
              >
                <div class="avatar-uploader">
                  <i class="el-icon-plus avatar-uploader-icon" />
                </div>
              </el-upload>
            </li>
          </ul>
        </el-col>
      </el-form-item>
      <el-form-item label="简介" prop="description">
        <el-input
          v-model="dataForm.description"
          type="textarea"
          placeholder="请输入简介"
        />
      </el-form-item> -->
      <el-form-item label="内容" prop="details">
        <vue-neditor-wrap
          v-model="dataForm.details"
          :config="myConfig"
          :destroy="false"
          @ready="ready"
        />
      </el-form-item>
      <el-form-item label="是否上架">
        <el-radio-group v-model="dataForm.isShow">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <div class="submitBtn" @click="dataFormSubmit()">确认</div>
    </el-form>
  </el-dialog>
</template>

<script>
import VueNeditorWrap from 'vue-neditor-wrap'
import { uploadFile } from '@/api/school'
import { saveCustom, fetchCustomCategoryList } from '@/api/custom'
import { baseUrl } from '@/utils/config'
export default {
  components: { VueNeditorWrap },
  data() {
    return {
      visible: false,
      baseUrls: baseUrl + '/sys/upload',
      commonLoading: false,
      loadingText: '数据正在提交...',
      categoryList: [],
      dataForm: {
        id: '',
        title: '',
        categoryId: 3,
        description: '',
        startTime: '',
        endTime: '',
        customTime: '',
        details: '',
        field1: '',
        field2: '',
        field3: '',
        isShow: 1,
        thumb: '',
        videoUrl: '',
        url: ''
      },
      dataRule: {
        title: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      },
      myConfig: {
        // 如果需要上传功能,找后端小伙伴要服务器接口地址
        serverUrl: baseUrl + '/sys/upload',
        // 你的UEditor资源存放的路径,相对于打包后的index.html
        UEDITOR_HOME_URL: '/NEditor/',
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 500,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 关闭自动保存
        enableAutoSave: false,
        // 拉升缩放
        imageScaleEnabled: false,
        default: ''
      }
    }
  },
  created() {
    this.getCategoryList()
  },
  methods: {
    viewPic() {
      window.open(this.dataForm.thumb, 'newW')
    },
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    ready(editorInstance) {
      this.editorInstance = editorInstance
    },
    // 上传配图
    uploadLogo(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      this.loadingText = '正在上传...'
      this.commonLoading = true
      uploadFile(formData).then((response) => {
        if (response && response.code === 1) {
          this.$message({
            type: 'success',
            message: '上传成功',
            onClose: () => {
              this.dataForm.thumb = response.data
              this.commonLoading = false
            }
          })
        } else {
          this.commonLoading = false
          this.$message({
            type: 'error',
            message: response.msg
          })
        }
      })
    },
    getCategoryList() {
      const data = {
        page: 1,
        pageSize: 1000
      }
      fetchCustomCategoryList(data).then((response) => {
        if (response && response.code === 1) {
          this.categoryList = response.data.list
        } else {
          this.categoryList = []
        }
      })
    },
    init(item) {
      this.dataForm.id = 0
      this.dataForm.title = ''
      this.dataForm.categoryId = 3
      this.dataForm.startTime = ''
      this.dataForm.endTime = ''
      this.dataForm.customTime = ''
      this.dataForm.description = ''
      this.dataForm.details = ''
      this.dataForm.field1 = ''
      this.dataForm.field2 = ''
      this.dataForm.field3 = ''
      this.dataForm.isShow = 1
      this.dataForm.thumb = ''
      this.dataForm.videoUrl = ''
      this.dataForm.url = ''

      if (item) {
        this.dataForm.id = item.id
        this.dataForm.title = item.title
        this.dataForm.categoryId = item.categoryId
        this.dataForm.startTime = item.startTime
        this.dataForm.endTime = item.endTime
        this.dataForm.customTime = item.customTime
        this.dataForm.description = item.description
        this.dataForm.details = item.details
        this.dataForm.field1 = item.field1
        this.dataForm.field2 = item.field2
        this.dataForm.field3 = item.field3
        this.dataForm.isShow = item.isShow ? 1 : 0
        this.dataForm.thumb = item.thumb
        this.dataForm.videoUrl = item.videoUrl
        this.dataForm.url = item.url
      }
      this.visible = true
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loadingText = '数据正在提交...'
          this.commonLoading = true
          saveCustom(this.dataForm).then((response) => {
            if (response && response.code === 1) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 500,
                onClose: () => {
                  this.commonLoading = false
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.commonLoading = false
              this.$message.error(response.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style>
.el-loading-mask {
  z-index: 999999999999999999 !important;
}

.avatar {
  width: 35px;
  height: 35px;
  display: block;
}
</style>
<style lang="scss" scoped>
.uploaderList {
  padding: 0;
  margin: 0;
  margin-left: 15px;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 80px;
    height: 32px;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    img {
      max-width: 148px;
      max-height: 148px;
    }
    .BtnBox {
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.7);
      width: 100%;
      height: 100%;
      color: #fff;
      text-align: center;
      font-size: 15px;
      display: none;
    }
  }
}
.uploaderList li:hover .BtnBox {
  display: inline-block;
}
</style>
<style lang="scss" scoped>
.el-dialog__wrapper .el-dialog .el-dialog__body {
  padding: 0 60px 30px;
}
.dialog-title {
  display: flex;
  height: 50px;
  align-items: center;
  margin-bottom: 20px;
  .title {
    flex: 1;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: bold;
  }
  .closeBtn {
    width: 30px;
    height: 30px;
  }
}

.leftContent {
  flex: 1;
  .tips {
    line-height: 40px;
  }
}
.submitBtn {
  width: 320px;
  height: 40px;
  cursor: pointer;
  background: #2884ec;
  border-radius: 20px;
  font-size: 18px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 40px;
  text-align: center;
  margin: 30px auto 10px;
}
</style>
